<!-- 评分规则设置 -->
<template>
  <a-drawer
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> 评分规则设置 </template>
    <div>
      <a-form :model="formData" ref="refForm" auto-label-width :rules="rules">
        <a-form-item label="评价总分上限" field="score" show-colon>
          <a-select v-model="formData.score">
            <a-option :value="1">设置上限</a-option>
            <a-option :value="2">不设置上限</a-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="上限分值"
          field="upper"
          show-colon
          v-if="formData.score === 1"
        >
          <a-input-number v-model="formData.upper" hide-button :precision="2">
            <template #suffix>
              <div>分</div>
            </template>
          </a-input-number>
        </a-form-item>

        <a-form-item label="评分计算" field="calculate" show-colon>
          <a-radio-group v-model="formData.calculate">
            <a-radio :value="1"
              >加和计算
              <a-tooltip background-color="white">
                <icon-info-circle-fill
                  style="color: #165dff; font-size: 16px"
                />
                <template #content>
                  <a-table :data="sumData" :pagination="false" stripe>
                    <template #columns>
                      <a-table-column
                        title="指标"
                        data-index="name"
                      ></a-table-column>
                      <a-table-column
                        title="指标评分"
                        data-index="score"
                      ></a-table-column>
                    </template>
                  </a-table>
                  <div style="color: #165dff">
                    评价总分= 评分1 + 评分2 + 评分3
                  </div>
                </template>
              </a-tooltip>
            </a-radio>
            <a-radio :value="2" :disabled="formData.upper === 2"
              >加权计算
              <a-tooltip background-color="white">
                <icon-info-circle-fill
                  style="color: #165dff; font-size: 16px"
                />
                <template #content>
                  <a-table :data="weightData" :pagination="false">
                    <template #columns>
                      <a-table-column
                        title="指标"
                        data-index="name"
                      ></a-table-column>
                      <a-table-column
                        title="指标权重"
                        data-index="weight"
                      ></a-table-column>
                      <a-table-column
                        title="指标评分"
                        data-index="score"
                      ></a-table-column>
                    </template>
                  </a-table>
                  <div style="color: #165dff">
                    评价总分= 评分1 * 50% + 评分2 * 30% + 评分3 * 20%
                  </div>
                </template>
              </a-tooltip>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div style="color: red">
        <icon-info-circle-fill style="font-size: 16px" />
        总分=<span>
          {{
            formData.calculate === 1 ? '评分直接累加' : '评分*指标权重，再累加'
          }}
        </span>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'rulesEmit']);

let refForm = ref();

let formData = ref({
  score: 1, // 评价总分上限， 1 设置上限 2不设置上限
  upper: undefined, // 上限分值
  calculate: 2 // 评分计算 1加和计算 2加权计算
});

const rules = {
  upper: [
    {
      required: true,
      message: '请选择'
    }
  ],
  score: [
    {
      required: true,
      message: '请输入'
    }
  ],
  calculate: [
    {
      required: true,
      message: '请选择'
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      // 每次显示都初始化
      formData.value.score = 1;
      formData.value.upper = undefined;
      formData.value.calculate = 2;
    }
  }
);

// 加和计算tips表格数据
const sumData = [
  {
    name: '指标1',
    score: '评分1'
  },
  {
    name: '指标2',
    score: '评分2'
  },
  {
    name: '指标3',
    score: '评分3'
  }
];

// 加权计算tips表格数据
const weightData = [
  {
    name: '指标1',
    weight: '50%',
    score: '评分1'
  },
  {
    name: '指标2',
    weight: '30%',
    score: '评分2'
  },
  {
    name: '指标3',
    weight: '20%',
    score: '评分3'
  }
];

const handleOk = async () => {
  if (await refForm.value.validate()) return;
  emits('rulesEmit', cloneDeep(formData.value));
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
